<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0",user-scalable=no>
<link rel="stylesheet" href="/css/cultivateWeb/login.css">
<!--<link href="../static/css/bootstrap.min.css" rel="stylesheet">-->
<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<style>
    button[disabled], html input[disabled]{
        cursor: not-allowed;background: #666;
    }

</style>
<div class="logPage">
    <div class="layui-container">
        <input type="hidden" id="isName" th:value="${name}"/>
<!--        <div class="logo_img">-->
<!--            <img src="../../static/img/logo.png" alt="">-->
<!--        </div>-->
        <section class="sec_1">
            <div class="div_2">
                <span class="sp_1 sp_1_check" id="loginSpan" data-id="0">登录</span>
                <span class="sp_1" id="regSpan"  data-id="1">注册</span>
            </div>
            <div id="login">
                <div class="div_3">
                    <span class="sp_2">用户名：<input id="name" type="text" class="in_1"/></span>
                </div>

                <div class="div_3">
                    <span class="sp_2">密&nbsp;&nbsp;码：<input id="pass" type="password" class="in_1"/></span>
                </div>


                <div class="div_3" style="margin-bottom: 20px">
                    <span class="sp_2" style="width: 0"><button onclick="log();" class="bt_2" style="margin:0">登录</button></span>
                </div>


<!--                <a th:href="${url}"><span style="font-size: 16px;margin-left:12px">扫一扫登录</span></a>-->
                <a href="/cultivate/forgetPass"><span style="font-size: 16px;margin-left:12px; float: right">忘记密码</span></a>

                <br/>
            </div>
            <div style="display: none" id="reg">
                <form id="signupForm">
                    <div class="div_3">
                        <span class="sp_2" style="width: 0">用户名：<input name="name" id="name2" type="text" class="in_1"/></span>
                    </div>
                    <div class="div_3">
                        <span class="sp_2">密&nbsp;&nbsp;码：<input name="password" id="password"
                                                                 type="password" class="in_1"/></span>
                    </div>
                    <div class="div_3">
                        <span class="sp_2">手机号：<input name="mobile" id="mobile" type="text" class="in_1"/></span>
                    </div>
                    <div class="div_3">
                        <span class="sp_2">验证码：<input name="code" id="code" type="text" class="in_2"/><input type="button" onclick="send(this)" class="bt_1" value="获取验证码"/>
                        </span>
                    </div>
                    <div class="box_1" style="padding-left:40px">
                        <label>&nbsp;<input id="radio" type="checkbox"></label>&nbsp;&nbsp;
                        <label th:each="xz:${consultations}">我已同意<a target="_blank" style="color: blue"
                                                                    th:href="@{'/notice/newsInfo?&id='+${xz.id}+'&name=注册须知'}"
                                                                    th:text="${xz.title}"></a></label>
                    </div>
                    <div class="div_3">
                        <span class="sp_2"><button type="submit" class="bt_2" style="margin:0">注册</button></span>
                    </div>
                </form>
            </div>
        </section>
    </div>
</div>
<div class="footer" th:include="cultivateWeb/header :: footer"></div>

</body>
<script src="/js/plugins/layer/layer.min.js" th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script src="/js/plugins/validate/jquery.validate.min.js"></script>
<script src="/js/plugins/validate/jquery.validate.extend.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript">
    //回车登录
    // document.onkeydown =cdk;
    // function cdk(){
    //     if(event.keyCode ==13){
    //         log();
    //     }
    // }
    $(function () {
        var isName = $("#isName").val();
        change(isName);
        $('.sp_1').click(function () {
            change($(this).attr("data-id"));
        });
    });

    function change(isName) {
        if (isName == '0') {
            $("#login").css("display", "inline");
            $("#reg").css("display", "none");
            $("#loginSpan").addClass("sp_1_check");
            $("#regSpan").removeClass("sp_1_check")
        }
        if (isName == '1') {
            $("#login").css("display", "none");
            $("#reg").css("display", "inline");
            $("#loginSpan").removeClass("sp_1_check");
            $("#regSpan").addClass("sp_1_check")
        }
    }

    function log() {
        var userName = $("#name").val();
        var password = $("#pass").val();
        var is_mobi = navigator.userAgent.toLowerCase().match(/(ipod|iphone|android|coolpad|mmp|smartphone|midp|wap|xoom|symbian|j2me|blackberry|wince)/i) != null;
        if ('' == userName) {
            layer.msg('请输入用户名');
            return false
        }
        if ('' == password) {
            layer.msg('请输入密码');
            return false
        }
        $.ajax({
            url: '/certificate/sendLogin',
            type: 'POST',
            data: {
                username: userName,
                password: password
            },
            success: function (r) {
                if (r.code == 0) {

                    window.localStorage.setItem("token", r.data.token);
                    window.localStorage.setItem("userName", r.data.userName);
                    //未读消息数量
                    window.localStorage.setItem("unreadNum0", r.data.unreadNum0);
                    window.localStorage.setItem("unreadNum1", r.data.unreadNum1);
                    if (document.referrer != '') {
                        console.log(document.referrer)
                        if (document.referrer.indexOf('forgetPass') !=-1 || document.referrer.indexOf('cultivateLogins') !=-1) {

                        } else {
                            if (is_mobi) {
                                location.href = '/cultivate/courseIndex'
                            }else{
                                location.href = document.referrer
                            }

                        }
                    }

                } else {
                    layer.msg(r.msg);
                }
            }
        })
    }

    $(function () {
        validateRule();
    });
    $.validator.setDefaults({
        submitHandler: function () {
            reg();
        }
    });

    function reg() {
        if (!$('#radio').prop("checked")) {
            layer.msg("请勾选已阅读注册须知");
            return false
        }
        $.ajax({
            type: "POST",
            url: '/certificate/sendRegister',
            data: $('#signupForm').serialize(),
            success: function (r) {
                if (r.code == 50012) {
                    layer.msg("该手机号已注册");
                } else if (r.code == 50015) {
                    layer.msg("验证码错误");
                } else if (r.code == 50017) {
                    layer.msg("用户名已存在");
                } else {
                    //跳转登录页
                    location.href = "/cultivate/mobileLogin?name=0";
                }
            }
        });
    }

    function checkMobile(sMobile) {
        if (!(/^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(sMobile))) {
            layer.msg('手机号码填写错误，请填写正确的手机格式');
            document.mobileform.mobile.focus();
            return false;
        }
        return true;
    }

    var countdown = 60;

    function settime(val) {
        if (countdown == 0) {
            val.removeAttribute("disabled");
            val.value = "获取验证码";
            countdown = 60;
        } else {
            val.setAttribute("disabled", true);
            val.value = "重新发送(" + countdown + ")";
            countdown--;
            var myVar = setTimeout(function () {
                settime(val)
            }, 1000)
        }
    }

    //发送验证码
    function send(val) {
        var name = $("#mobile").val();
        if (name.length != 0) {
            jQuery.ajax({
                url: '/certificate/sendRegCode',
                type: 'POST',
                data: {mobile: name},
                success: function (data) {
                    checkMobile(name);
                    if (data == 1) {
                        val.removeAttribute("disabled");
                        val.value = "获取验证码";
                        countdown = 60;
                        layer.msg("此手机号码已注册")
                    } else {
                        layer.msg("发送成功");
                        val.setAttribute("disabled", true);
                        val.value = "重新发送(" + countdown + ")";
                        countdown--;
                        setTimeout(function () {
                            settime(val)
                        }, 1000)
                    }
                }
            })
        } else {
            layer.msg('请输入手机号！');
        }
    }

    function validateRule() {
        var icon = "<i class='fa fa-times-circle'></i>";
        $("#signupForm").validate({
            rules: {
                name: {
                    required: true
                },
                password: {
                    required: true,
                    checkPassword1: true,
                    minlength: 8,
                    maxlength: 15
                },
                mobile: {
                    required: true,
                    isPhone: true
                },
                code: {
                    required: true
                }
            },
            messages: {
                name: {
                    required: icon + "请输入用户名"
                },
                password: {
                    required: icon + "请输入密码",
                    minlength: '密码最少8位',
                    maxlength: '密码最长15位'
                },
                mobile: {
                    required: icon + "请输入手机号"
                },
                code: {
                    required: icon + "请输入验证码"
                }
            }
        })
    }

</script>
</html>